<template>
<div>
	<div class="g_box_con" style="padding:20px;">
		<Row  class="kemu">
			<Col span="8">
				<Form  :label-width="90" style="width: 100%" inline>
					<!--FormItem label="部门：">
						<Select v-model="name" style="width:150px" placeholder="请选择主体">
							<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem-->
					<FormItem label="科目：">
						<subject_filter v-model="subject" field="name" ></subject_filter>
					</FormItem>
					<Button style="margin-left: 10px;" @click="add">添加</Button>
				</Form>
			</Col>

			<Col span="16" class="kemu_list">
				
				<ul>
					<li v-for="(rItem,index) in list" :key="index">
						<span class="kemu_name">{{rItem}}</span>
						<span class="kemu_del" @click="del(index)">删除</span>
					</li>
				</ul>
			</Col>
		</Row>
		
		<!--div style="padding-left: 90px;"><Button @click="handleAdd">添加横向表头</Button></div-->
	</div>
	
	<money_item ref="definfo"></money_item>
</div> 
	

</div>
</template>

<script>

import subject_filter from '@/themes/components/subject_filter';
import money_item from './money_item';
import Wcore from '@/libs/common';

export default {
	components:{
		subject_filter,
		money_item
	},
    data () {
		let self = this;
        return {
			subject:"",
			list:[]
        };
	},
	created(){
		var y_data = Wcore.getData('a_ylist');
		if(y_data){
			var ls_data = this._getData(y_data);
			this.list = ls_data.list;
		}
	},
    props: ['ruleList','addList','hTable'],
    watch: {
		
	},
	methods:{
		getCustomInfo(val){
			console.log(val)
		},
		add() {
		
			if (this.subject == '') {
				return;
			}
			this.list = this.list.filter(item => item !==this.subject);
			
			this.list.push(this.subject);
		},
		del(index){
			this.list.splice(index,1);
		},
		get_data(){
			var info = this.$refs['definfo'].get_data();
			
			
			var data = {
				list:this.list,
				info:info
			};
			
			if(this.list.length>0){
				Wcore.setData('a_ylist',data);
			}
			
			return data;
		},
		set_data(data){
			var ls_data = this._getData(data);
			this.list = ls_data.list;
			
			var info = ls_data.info;
			this.$refs['definfo'].set_data(info);
		}
	}
};
</script>
<style scoped>


.kemu_list li{
	    position: relative;
    width: 20%;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
    line-height: 30px;
    margin-bottom: 5px;
}
.kemu_list li .kemu_name{
	
}
.kemu_list li .kemu_del{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	color:#1abc9c;
	display: none;
	background-color: rgba(255, 255, 255, .9);
	cursor: pointer;
}
.kemu_list li:hover .kemu_del{
	display: block;
}
</style>